<!--
    我的直播
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 我的直播
        div.centerBox
          <!--span.kaibo 我要开播-->
          ul(:style="{'margin-top': '76px'}")
            li
              span.centerP 直播标题 :
              input.centers(v-model= "liveName" placeholder='请输入标题')
            li
              span.centerP 类别 :
              form.form
                select(name="leixing").select(v-model="type")
                  option(v-for="(item,index) in getSelectDateList ") {{ item.name }}
            li
              span.centerP 直播简介 :
              textarea.textInput(v-model ="dec" rows="8" cols="32" style="resize:none")
            li.centerLi
              span.centerP 直播封面 :
              kalix-upload(v-model ="img" v-bind:isImage="true" style="width:230px")
          button.baocun(v-on:click="startLive") 开播
          div#black(ref="black" )
          div#black-box(ref="blacks")
            div.contentBox
              div.denglu
                span.dengluText  服务器 :&nbsp;&nbsp;
                input.inputname(v-model="server")
              div.denglu
                span 流密匙 :&nbsp;&nbsp;
                input.inputname(v-model="rtmp")
              div.disappear(@click="disappear")
                img(src="/static/Index/关闭按钮_u709.png")
    div.clearfix
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'MyLive',
    data() {
      return {
        type: '',
        dec: '',
        img: '',
        rtmp: '',
        getSelectDateList: [],
        liveName: ''
      }
    },
    mounted() {
      this.uid = this.$KalixCatch.get('id')
      this.username = this.$KalixCatch.get('user_name')
      this.getHeadImg(this.uid)
      this.getSelectDate()
      this.getRid()
    },
    methodsL: {
      startLive() {
        this.$http.request({
          method: 'Get',
          url: '/camel/rest/training/lives/startLive',
          params: {
            'userId': this.uid,
            'username': this.username,
            'type': this.type,
            'liveName': this.liveName,
            'imgUrl': this.img
          }
        }).then(res => {
          this.$refs.black.style.display = 'block'
          this.$refs.blacks.style.display = 'block'
          var jsonText = JSON.stringify(res.data.data[0].liveUrl)
          var a = jsonText.split('/')
          this.rtmp = a[a.length - 1].substring(0, a[a.length - 1].length - 1)

          this.server = jsonText.substring(1, jsonText.length - 38)
        })
      },
      getHeadImg(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + `${id}`
        }).then(res => {
          this.userIcon = res.data.data[0].icon
        })
      },
      getSelectDate() {
        this.$http.request({
          method: 'Get',
          url: '/camel/rest/training/classifys'
        }).then(res => {
          this.getSelectDateList = res.data.data
        })
      },
      thelog() {
        this.$refs.black.style.display = 'block'
        this.$refs.blacks.style.display = 'block'
      },
      disappear() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  h1
    font-size 20px
    color #FF9933
    margin-bottom 36px

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px

  .centerBox
    width 400px
    height 90%
    margin 0 auto

  .centerBox li
    margin 26px 0

  .centerP
    display inline-block
    width 75px
    margin-right 20px
    text-align right

  .centers
    width 248px
    height 26px

  .form
    display inline-block

  .select
    width 250px
    height 30px

  .textInput
    width 250px
    height 120px
    box-sizing border-box

  .centerLi
    width 500px

  .baocun
    display block
    width 80px
    height 34px
    text-align center
    line-height 34px
    color #fff
    background-color #008F95
    border-radius 5px
    cursor pointer
    margin-left 130px
    font-weight 700
    outline none
    border none

  .contentBox
    margin 129px auto

  .denglu
    width 350px
    height 40px
    margin 20px 0 0 120px

  .inputname
    width 250px
    height 30px

  .disappear
    width 20px
    height 20px
    position absolute
    right 20px
    top 16px
    cursor pointer
    img
      height 20px

  /*登录弹窗*/
  #black
    width 100%
    height 100%
    background-color #000
    position fixed
    top 0
    left 0
    z-index 2
    opacity 0.3
    display none

  #black-box
    width 600px
    height 380px
    background-color #fff
    position fixed
    left 50%
    top 50%
    margin-left -300px
    margin-top -190px
    z-index 999
    display none
    border-radius 10px

</style>
